<template>
	<div class="over">
		<van-back-top
			target=".over"
			offset="200" />
		<div class="topBox">
			<div class="L"><a href="index.html">HUANG</a></div>
			<div class="C">
				<div class="saerchbox">
					<input
						@focus="search"
						type="text"
						placeholder="请输入您要搜索的内容" /><img src="assets/images/ss.png" />
				</div>
			</div>
			<div
				class="R"
				@click="topRight">
				<img src="assets/images/tr.png" />
			</div>
		</div>

		<!-- 轮播 -->
		<van-swipe
			class="my-swipe"
			:autoplay="3000"
			style="height: 210px"
			indicator-color="white">
			<van-swipe-item
				v-for="swipers in swiper"
				:key="swipers.id">
				<router-link :to="{ path: '/list/shop', query: { proid: swipers.id } }">
					<img :src="swipers.thumb_swiper" />
				</router-link>
			</van-swipe-item>
		</van-swipe>

		<!-- nav -->
		<div class="lqgwBox">
			<ul>
				<li
					v-for="ptype in productType"
					:key="ptype.id">
					<router-link :to="{ path: '/list/shop', query: 'swipers.id' }">
						<img :src="ptype.thumb_text" />
						<p>{{ ptype.name }}</p>
					</router-link>
				</li>
			</ul>
		</div>

		<!-- 新品 -->
		<div class="contitbox">
			<p>新品<span>•</span>推荐</p>
		</div>
		<ul class="proul">
			<li
				class="my-shop"
				v-for="status in swiper"
				:key="status.id">
				<div class="con">
					<router-link :to="{ path: '/list/shop', query: { proid: status.id } }">
						<img :src="status.thumb_swiper" />
						<p class="van-ellipsis">{{ status.name }}</p>
						<p>
							<span>￥</span>{{ status.price }} <span><van-tag type="danger">{{ status.status_text }}</van-tag></span>
						</p>
					</router-link>
				</div>
			</li>
		</ul>

		<Footer></Footer>
	</div>
</template>
<script>
	import Footer from "components/common/Footer.vue";
	export default {
		created() {
			this.resHome();
		},
		data() {
			return {
				swiper: null,
				productType: null,
			};
		},
		methods: {
			async resHome() {
				let res = await this.$api.HomeDate();

				// 判断是否被响应拦截器拦截
				if (res.code == -1) {
					showFailToast({ message: res.msg });
					return;
				}
				// 判断请求是否成功
				if (res.code == 0) {
					showFailToast({ message: res.msg });
					return;
				}
				this.productType = res.data[0];
				this.swiper = res.data[1];
			},
			search() {
				this.$router.push("/list");
			},
			topRight() {
				this.$router.push("/list/classifyshop");
			},
		},
		components: {
			Footer,
		},
	};
</script>

<style lang="less" scoped>
	.con {
		border-radius: 20px;
		overflow: hidden;

		p {
			text-align: left !important;
			padding: 0 10px;
			height: 30px !important;
			line-height: 30px !important;
			&:nth-child(2) {
				font-size: 14px;
			}
			&:nth-last-child(1) {
				color: #ff4142;
				&>span:nth-last-child(1){
					float: right;
				}
			}
		}
	}
</style>
